<!DOCTYPE html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>膳食管理</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/common.js"></script>
    <script src="js/jsrender.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        var pageNum = 1		// 记录当前页面
        var method = "showAll"	// 记录当前方法
        var pages	// 记录页面总数
        const pageSize = 5 //页面行数
        $(function () {

            function showAll() {
                //请求所有膳食信息
                $.ajax({
                    url: GC.bctx + "dish/list",
                    type: "GET",
                    data: {pageNum:pageNum,pageSize:pageSize},
                    headers: {"Authorization": localStorage.getItem("token")},
                    success: function (r) {
                        if (r.successed) {
                            $("#dishs").html($("#dishsTemplate").render(r.data.list))
                            $("#pagination").html($("#paginationTemplate").render(r.data))
                            pages = r.data.pages
                            method = "showAll"
                        } else {
                            window.location.href = "login.html"
                        }
                    }
                })
            }


            function find() {
                $.ajax({
                    url: GC.bctx + "dish/find",
                    type: "GET",
                    data: {"dishname":$("#dishname_find").val(),
                        "dishtype":$("#dishtype_find").val(),
                        "dishfeatures":$("#dishfeatures_find").val(),
                        pageNum:pageNum,pageSize:pageSize},
                    headers: {"Authorization": localStorage.getItem("token")},
                    success: function (r){
                        if(r.successed){
                            $("#dishs").html($("#dishsTemplate").render(r.data.list))
                            $("#pagination").html($("#paginationTemplate").render(r.data))
                            pages = r.data.pages
                            method = "find"
                        }else{
                            window.location.href="login.html"
                        }
                    }
                })
            }


            //显示所有膳食级别信息
            showAll()

            //查询
            $("form").submit(function () {
                pageNum = 1
                if($("#dishname_find").val()=="" && $("#dishtype_find").val()=="" && $("#dishfeatures_find").val()==""){
                    showAll()
                }else{
                    find()
                }
                return false
            })


            //删除
            $(document).on("click", "[name=deleteDish]", function () {
                //var id = $(this).parent().parent().find("td:first").text()
                var id = $(this).attr("data-id")
                if (!confirm("您真的确认需要删除膳食编号为" + id + "的数据吗？")) {
                    return
                }
                if (!confirm("数据删除后，无法恢复，请再次确认？")) {
                    return
                }
                //AJAX删除部门
                $.ajax({
                    url: GC.bctx + "dish/delete/" + id,
                    type: "DELETE",
                    headers: {"Authorization": localStorage.getItem("token")},
                    success: function (r) {
                        if (r.successed) {
                            alert(r.message)
                            //显示所有膳食信息
                            pageNum=1
                            showAll()
                        } else {
                            alert(r.message)
                        }
                    }
                })
            })

            //显示详细信息
            $(document).on("click", "[name=updateDish]", function () {
                //var id = $(this).parent().parent().find("td:first").text()
                var id = $(this).attr("data-id")
                $.ajax({
                    url: GC.bctx + "dish/" + id,
                    type: "GET",
                    headers: {"Authorization": localStorage.getItem("token")},
                    success: function (r) {
                        if (r.successed) {
                            $("#dishid_update").val(r.data.dishid)
                            $("#dishname_update").val(r.data.dishname)
                            $("#dishprice_update").val(r.data.dishprice)
                            $("#dishmaterial_update").val(r.data.dishmaterial)
                            $("#dishtype_update").val(r.data.dishtype)
                            $("#dishfeatures_update").val(r.data.dishfeatures)
                            $("#updateModal").modal("show")
                        } else {
                            window.location.href = "login.html"
                        }
                    }
                })

            })

            // 分页组件点击跳转，两种情况
            $(document).on("click", "[name=jump]", function() {
                pageNum = this.innerHTML	// 获取<a>的内容
                method == "showAll" ? showAll() : find()
            })

            // 点击上一页按钮
            $(document).on("click", "[name=previous]", function() {
                if(pageNum-1 > 0) {
                    pageNum = pageNum-1
                    method == "showAll" ? showAll() : find()
                } else {
                    alert("当前页为第1页")
                }
            })

            // 点击下一页按钮
            $(document).on("click", "[name=next]", function() {
                if(pageNum+1 <= pages) {
                    pageNum = pageNum+1
                    method == "showAll" ? showAll() : find()
                } else {
                    alert("当前页为最后1页")
                }
            })
        })


        //插入
        function insert_form() {
            var dishname_temp = $.trim($('#dishname').val());

            if (!dishname_temp) {
                alert('膳食不能为空！');
                return false;
            }

            // 异步提交数据
            $.ajax(
                {
                    url: GC.bctx + "dish/insert",
                    type: "POST",
                    data: $("#form_insert").serialize(),
                    headers: {"Authorization": localStorage.getItem("token")},
                    success: function (r) {
                        if (r.successed) {
                            //新增成功，转向显示所有部门页面
                            alert(r.message)
                            window.location.href = "dish.html"
                        } else {
                            //新增失败，显示失败信息
                            alert(r.message)
                        }
                    }
                });

            return false;
        }

        //修改
        function update_form() {
            var dishname_temp = $.trim($('#dishname_update').val());

            if (!dishname_temp) {
                alert('膳食名称不能为空');
                return false;
            }

            // 异步提交数据
            $.ajax(
                {
                    url: GC.bctx + "dish/update/"+$("#dishid_update").val(),
                    type: "PUT",
                    data: $("#form_update").serialize(),
                    headers: {"Authorization": localStorage.getItem("token")},
                    success: function (r) {
                        if (r.successed) {
                            //新增成功，转向显示所有部门页面
                            alert(r.message)
                            window.location.href = "dish.html"
                        } else {
                            //新增失败，显示失败信息
                            alert(r.message)
                        }
                    }
                });

            return false;
        }
    </script>
</head>



<body>

<div class="float-left">
    <form action="find" method="get" class="container-fluid text-center">
        <input name="dishname" id="dishname_find" type="text" placeholder="膳食名称">
        <input name="dishtype" id="dishtype_find" type="text" placeholder="膳食类型">
        <input name="dishfeatures" id="dishfeatures_find" type="text" placeholder="膳食特点">
        <input class="btn btn-info" type="submit" value="查 询"/>
        <input class="btn btn-info" type="reset" value="重置">
    </form>
</div>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary " data-toggle="modal" data-target="#insertModal">✚ 添加</button>
<!-- 模态框（Modal） -->
<form method="post" action="" class="form-horizontal" role="form" id="form_insert" onsubmit="return insert_form()"
      style="margin: 20px;">
    <div class="modal fade" id="insertModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">新增膳食信息</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label for="dishname" class="col-sm-3 control-label">膳食名称</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="dishname" name="dishname"
                                       placeholder="例如：麻婆豆腐">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="dishprice" class="col-sm-3 control-label">价格（整数）</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="dishprice" name="dishprice"
                                       placeholder="例如：10">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="dishmaterial" class="col-sm-3 control-label">膳食原材料</label>
                            <div class="col-sm-9">
                                <textarea rows="5" cols="20" class="form-control" id="dishmaterial"
                                          name="dishmaterial"
                                          placeholder="例如：豆腐、辣椒"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="dishtype" class="col-sm-3 control-label">膳食类型</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="dishtype" name="dishtype"
                                       placeholder="例如：主食">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="dishfeatures" class="col-sm-3 control-label">膳食特点</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="dishfeatures" name="dishfeatures"
                                       placeholder="例如：多盐">
                            </div>
                        </div>



                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <button type="submit" class="btn btn-primary">
                        提交
                    </button>
                    <span id="tip"> </span>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
</form>

<!-- 修改信息模态框（Modal） -->
<form method="post" action="" class="form-horizontal" role="form" id="form_update" onsubmit="return update_form()"
      style="margin: 20px;">
    <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel_upate">修改护理等级信息</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form">
                            <div class="form-group">
                            <div class="col-sm-9">
                                <input type="hidden" class="form-control" id="dishid_update" name="dishid">
                            </div>
                            </div>
                            <div class="form-group">
                                <label for="dishname_update" class="col-sm-3 control-label">膳食名称</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="dishname_update" name="dishname"
                                           placeholder="例如：麻婆豆腐">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="dishprice_update" class="col-sm-3 control-label">价格（整数）</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="dishprice_update" name="dishprice"
                                           placeholder="例如：10">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="dishmaterial_update" class="col-sm-3 control-label">膳食原材料</label>
                                <div class="col-sm-9">
                                <textarea rows="5" cols="20" class="form-control" id="dishmaterial_update"
                                          name="dishmaterial"
                                          placeholder="例如：豆腐、辣椒"></textarea>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="dishtype_update" class="col-sm-3 control-label">膳食类型</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="dishtype_update" name="dishtype"
                                           placeholder="例如：主食">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="dishfeatures_update" class="col-sm-3 control-label">膳食特点</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="dishfeatures_update" name="dishfeatures"
                                           placeholder="例如：多盐">
                                </div>
                            </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <button type="submit" class="btn btn-primary">
                        提交
                    </button>
                    <span id="tip_update"> </span>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
</form>


<script id="dishsTemplate" type="text/jx-jsrender">
		<tr align="center">
			<td>{{:dishid}}</td>
			<td>{{:dishname}}</td>
			<td>{{:dishprice}}</td>
			<td>{{:dishmaterial}}</td>
			<td>{{:dishtype}}</td>
			<td>{{:dishfeatures}}</td>
			<td align="center">
<!--			<a href="dish_update.html?id={{:dishid}}" id="update_id" class="btn btn-info" data-id="{{:dishid}}">修改</a>-->
			    <button name="updateDish" class="btn btn-info" data-id="{{:dishid}}">修改</button>
				<button name="deleteDish" class="btn btn-danger" data-id="{{:dishid}}">删除</button>
			</td>
		</tr>


</script>

<table class="table table-bordered">
    <tr>
        <th class="text-center" width="5%">序号</th>
        <th class="text-center" width="10%">膳食名称</th>
        <th class="text-center" width="10%">价格</th>
        <th class="text-center" width="40%">材料</th>
        <th class="text-center" width="10%">类型</th>
        <th class="text-center" width="10%">特点</th>
        <th class="text-center" width="15%">操作</th>
    </tr>
    <tbody id="dishs"></tbody>
</table>

<!--分页-->
<div align="center">
    <ul class="pagination" id="pagination"></ul>
    <script id="paginationTemplate" type="text/x-jsrender">
		<li class="page-item"><a class="page-link" href="javascript:void(0);" name="previous">&laquo;</a></li>
		{{for navigatepageNums}}
		<li class="page-item"><a class="page-link" href="javascript:void(0);" name="jump">{{:#data}}</a></li>
		{{/for}}
		<li class="page-item"><a class="page-link" href="javascript:void(0);" name="next">&raquo;</a></li>
	</script>
</div>

</body>
</html>